
<template>

  <body id ="paper">
  <div class="common-layout">

    <div style="margin-top: 50px;margin-left: 60px;">
      <span style="font-weight: bold ;color: white;font-size:30px;">
       学习知识汇聚平台</span>
      <el-divider direction="vertical" style="font-weight: bold ;color: white;"></el-divider>
      <span style="font-weight: bold ;color: white;font-size:15px;">
        项目实训</span>
    </div>

    <el-container>
      <el-header > </el-header>

      <el-main style="margin-left: 700px;margin-right: 50px" >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">


          <el-form-item label="学工号" prop="username" >
            <el-input type =" text" prefix-icon="el-icon-user-solid" v-model="ruleForm.username "></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input  type="password"  prefix-icon="el-icon-lock" v-model="ruleForm.password"></el-input>
          </el-form-item>
          <!--   实现登录验证时需要判断跳转-->
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>

            <div style="font-weight: bold ;color: white;font-size:5px;">
              温馨提示：
              用户名为职工号/学号，登录密码为山东大学统一认证平台密码
            </div>
          </el-form-item>
        </el-form>

      </el-main>
    </el-container>
  </div>


  </body>
</template>

<script>
import QS from 'qs'
import axios from "axios";
export default {

  name: "Login",
  data() {
    return {

      lts:'',
      cookiess:'',
      s:'',
      ruleForm: {
        username: '',
        password: '',

      },
      rules:
          {
            username: [
              { required: true, message: '请输入学工号', trigger: 'blur' },
              { min: 5, max: 20, message: '请输入正确学工号', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'change' },
              { min: 6, max: 20, message: '请输入统一身份认证密码', trigger: 'blur' }

            ],

          }
    };
  },
  //回车键登录功能
  created() {
    var _this = this;
    document.addEventListener("keydown", _this.watchEnter);
  },
  destroyed() {
    //移除监听回车按键
    var _this = this;
    document.removeEventListener("keydown", _this.watchEnter);
  },
  methods: {
    watchEnter(e) {
      var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
      //判断如果用户按下了回车键（keycody=13）
      if (keyNum == 13) {
        this.submitForm('ruleForm')
      }
    }
    ,
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this=this
          axios.get('http://47.107.40.143:8080/getLt').then(function (resp){
            _this.lts=resp.data.data.lt
            console.log(resp)
            console.log(_this.lts)
            _this.cookiess=resp.data.data.cookies
            console.log(_this.cookiess)
            let data1=_this.ruleForm.username+_this.ruleForm.password+_this.lts
            console.log(data1)
            _this.s=strEnc(data1,"1","2","3")
            console.log(_this.s)
            axios.post("http://47.107.40.143:8080/login",QS.stringify(
                {

                  uid:_this.ruleForm.username,
                  rsa:_this.s,
                  lt:_this.lts,
                  cookies:_this.cookiess,
                  ul:_this.ruleForm.username.length,
                  pl:_this.ruleForm.password.length

                }
            )).then(function (resp1){

              if(resp1.data.code!=200)
              {
                _this.$alert('请检查您的用户名或密码', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    this.$message({
                      type: 'info',
                      message: `action: ${ action }`
                    });
                  }
                });
              }
              if(resp1.data.code==200) {

                if (_this.ruleForm.username == resp1.data.data.uid) {
                  sessionStorage.setItem("uid", resp1.data.data.uid)
                  sessionStorage.setItem("username", resp1.data.data.username)
                  _this.$router.push({
                    name: "Blogs",
                  })
                }
              }



            })
          })


        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
    ,
  },

}
</script>

<style scoped>


#paper {
  background:url("../assets/imagebox/4.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

.el-header, .el-footer {
  /*background-color: #B3C0D1;*/
  color: #333;
  text-align: center;
  line-height: 50px;
  height: 200px;
}

.el-aside {
  /*background-color: #D3DCE6;*/
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.demo-ruleForm
{
  /*margin: 0 auto;*/
  /*margin-left: 20px;*/
  max-width: 500px;
  margin-right: 50px;
  margin-top: 45px;
}

</style>